import Vue from "vue"

// 明确地安装路由功能
import VueRouter from "vue-router"
Vue.use(VueRouter)

import Foo from "../pages/Foo.vue"
import Bar from "../pages/Bar.vue"
import About from "../pages/About.vue"
import User from "../pages/User.vue"
import NotFound from "../pages/NotFound.vue"

// VueRouter 实例 router 
// 1. 默认 hash 模式
// 2. h5 history 模式
const router = new VueRouter({
	mode: 'history',
	routes: [
		// foo 跳转至首页 /   foo -> /
		// / 跳转至首页 /
		// { path: '/foo', redirect: '/' },
		
		{ path: '/', redirect: { name: "foo" } },
		// { path: "/foo/profile", },
		// { path: "/foo/posts", },
		{ 
			path: '/foo',
			component: Foo,
			name: "foo",
			children: [
				// /foo/profile
				{
					path: 'profile',
					component: () => {
						return import("../pages/foo/FooProfile.vue")
					}
				},
				// /foo/posts
				{
					path: 'posts',
					component: () => {
						return import("../pages/foo/FooPosts.vue")
					}
				}
			]
		},
		{ path: '/bar', component: Bar, name: "bar" },
		{ path: '/about', component: About },
		// { path: '/user/:id', component: User },
		{ 
			path: '/user/:id/article/:index',
			component: User,
			name: "user"
		},
		{ path: "*", component: NotFound }
	]
})
export default router

// www.baidu.com/artcile?id=23
// www.baidu.com/artcile
// www.baidu.com/artcile/23
// www.baidu.com/artcile/34
// www.baidu.com/artcile/36

